
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {background-color: #45cbff;}
		#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境
	/*
		渐变：
			1) 线性渐变
					createLinearGradient(x1, y1, x2, y2);

				添加方法addColorStop(位置，颜色)  添加渐变点

					起始点坐标(x1, y1) 、结束点坐标(x2, y2);

			2) 放射性渐变
				createRadialGradient(x1, y1, r1, x2, y2, r2)
					第一个圆的坐标和半径、第二个圆的坐标和半径
	*/	oGC.beginPath();
	 	var obj = oGC.createLinearGradient(350, 350, 500, 500);
	 	
	 	obj.addColorStop(0, 'red');				//起点用0表示
	 	obj.addColorStop(0.5, 'green');		//中间也可以设置
	 	obj.addColorStop(1, 'blue');			//终点用1表示

	 	oGC.fillStyle = obj;
	 	oGC.fillRect(350, 350, 150, 150);

	 	oGC.beginPath();
	 	var obj = oGC.createRadialGradient(200, 200, 100, 200, 200, 150);

	 	obj.addColorStop(0, 'red');
	 	obj.addColorStop(0.5, 'yellow')
	 	obj.addColorStop(1, 'blue');

	 	oGC.fillStyle = obj;
	 	oGC.fillRect(0, 0, 350, 350)
	}
	</script>
</head>
<body>
	<canvas id="c1" width="500" height="500">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>